<template>
	<view>
		<header-top :messageInfo="{typeFlag:true,message:'客户转让'}"></header-top>
		<view class="mainpaddingbtn">
			<view class="mainpadding">
				<view class="strongtext">客户名称</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入客户名称">
				</view>
				<view class="strongtext margin_top">客户姓名</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入客户姓名">
				</view>
				<view class="strongtext margin_top">客户电话</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入客户电话">
				</view>
				<view class="strongtext margin_top">店铺地址</view>
				<view class="flexbetween iteminput">
					<uni-data-picker :localdata="items" placeholder="请选择所在的省市区、乡镇" popup-title="请选择地区" v-model="area"
						 @change="bindPickerChange">
						<text class="word12" v-if="!area.length">请选择所在的省市区、乡镇</text>
						<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="address"></view>
				</view>
				<view class="strongtext margin_top">详细地址</view>
				<view class="flexleft iteminput">
					<input type="text" placeholder="请输入详细地址">
				</view>
				<view class="flexbetween margin_top">
					<view class="tsflex">
						<view class="strongtext">选择行业</view>
						<view class="flexcenter radius birthday">
							<view>钢材商</view>
							<view class="selecticon"></view>
						</view>
					</view>
					<view class="tsflex">
						<view class="strongtext">经营范围</view>
						<view class="flexcenter radius birthday">
							<view>工字钢、钢筋</view>
							<view class="selecticon"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="posibtn">
			<view class="btn radius">确认修改</view>
		</view>
	</view>
</template>

<script>
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				area: [],// 选择地区内容
				address: {
					province: "",
					city: "",
					county: ""
				},
				items: citys.data,// 选择地区内容
			}
		},
		methods: {
			bindPickerChange(val) {// 选择地区内容
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainpaddingbtn{
		padding: 0 30rpx 150rpx 30rpx;
	}
	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.margin_top {
		margin-top: 20rpx;
	}

	.iteminput {
		padding: 20rpx 30rpx;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}
	.iteminput{
		input{
			width: 100%;
		}
	}
	// 上传图片
	.bigbox {
		height: 325rpx;
		width: 100%;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.selecticon {
		margin-left: 10rpx;
		background-image: url('@/static/imags/upload/select.png');
		background-size: 100% 100%;
	}

	.selecttext {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.address {
		width: 50rpx;
		height: 47rpx;
		background-image: url("@/static/imags/upload/address.png");
		background-size: 100% 100%;
	}

	.sexinput {
		width: 159rpx;
		padding: 20rpx 0;
		border: 1rpx solid #999999;
		text-align: center;
	}

	.birthday {
		padding: 20rpx 10rpx;
		border: 1rpx solid #999999;
	}

	.addempoly {
		margin-top: 60rpx;
	}
	.tsflex{
		flex-direction: column;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.posibtn{
		position: fixed;
		bottom: 50rpx;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 0 66rpx;
	}
	.switch{
		margin-right: 30rpx;
		
	}
	.fadd{
		width: 23rpx;
		height: 23rpx;
		background-image: url('../../static/imags/myemploy/fadd.png');
		background-size: 100% 100%;
	}
	.freduce{
		width: 23rpx;
		height: 5rpx;
		background-image: url('../../static/imags/myemploy/freduce.png');
		background-size: 100% 100%;
	}
	.addradios{
		width: 200rpx;
		border-radius: 50rpx;
		background-color: #999;
		color: #fff;
		padding: 10rpx 0;
	}
	.number{
		width: 60rpx;
		text-align: center;
	}
</style>
